<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>DPL: 表单</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/skin/frontend/uemall_v2/mobile/css/dpl.css">
<link rel="stylesheet" href="/skin/frontend/uemall_v2/mobile/css/dpl/dpl-demo.css">
</head>

<body class="cmWrapper dpl-demo-list">
<article class="cmPage">
	<header class="cmPageNavBar">
		<h1>表单</h1>
		<div class="cmBtnWrapper cmRight">
			<a class="cmBtn" href="javascript:location.reload();">刷新</a>
		</div>
		<div class="cmBtnWrapper cmLeft">
			<a class="cmBtn cmBack" href="../"><b>DPL</b></a>
		</div>
	</header>
	<section class="form">
		<h2>左侧有控件</h2>
		<ul class="cmList cmHasLeftBox">
			<li>
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，无详情，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
			</li>
			<li class="cmHasDetail">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，有详情，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
				<a href="#"></a>
			</li>
			<li data-descr="描述文字，testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
			</li>
			<li class="cmHasDetail" data-descr="描述文字，testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
				<a href="#"></a>
			</li>
			<li data-badge="999">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
			</li>
			<li data-badge="999" data-descr="描述文字，testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
			</li>
			<li class="cmHasDetail" data-badge="999">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
				<a href="#"></a>
			</li>
			<li class="cmHasDetail" data-badge="999" data-descr="描述文字，testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
				<a href="#"></a>
			</li>
			<li data-value="选项值文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长">
				<label class="cmLongText">
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
			</li>
			<li data-value="选项值" data-descr="描述文字，testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
			</li>
			<li class="cmHasDetail" data-value="选项值文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长">
				<label class="cmLongText">
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
				<a href="#"></a>
			</li>
			<li class="cmHasDetail" data-value="选项值" data-descr="描述文字，testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest">
				<label>
					<input type="checkbox" name="checkbox" value="" checked="checked">
					表单项标签，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长
				</label>
				<a href="#"></a>
			</li>
		</ul>
	</section>
	<section class="form">
		<h2>右侧有控件</h2>
		<ul class="cmList cmHasRightBox">
			<li>
				<label>
					<b>标签文字</b>
					<input type="text" name="username" placeholder="输入框提示文字">
				</label>
			</li>
			<li data-descr="在 Safair 和 Android2 下，这个效果无法完美实现。">
				<label>
					<b>标签文字</b>
					<input type="text" name="username" placeholder="输入框提示文字">
				</label>
			</li>
			<li>
				<label class="cmLongText">
					<b>标签文字加长</b>
					<input type="text" name="username" placeholder="输入框提示文字">
				</label>
			</li>
			<li class="cmHasIcon">
				<label>
					<i class="cmIcon cmX30"></i>
					<b>标签文字</b>
					<input type="text" name="username" placeholder="输入框提示文字">
				</label>
			</li>
			<li class="cmHasIcon">
				<label class="cmLongText">
					<i class="cmIcon cmX30"></i>
					<b>标签文字加长</b>
					<input type="text" name="username" placeholder="输入框提示文字">
				</label>
			</li>
			<li>
				<label>
					<b>标签文字</b>
					<select name="select" id="sl_">
						<option value="" selected="selected" class="cmPlaceHolder">(提示文字)</option>
						<option value="1">下拉框选项1</option>
						<option value="2">下拉框选项2</option>
					</select>
				</label>
			</li>
		</ul>
	</section>
	<section class="form">
		<h2>无标签</h2>
		<ul class="cmList cmHasOnlyBox">
			<li>
				<label>
					<input type="text" name="username" placeholder="输入框提示文字，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长">
				</label>
			</li>
			<li class="cmHasIcon">
				<label>
					<i class="cmIcon cmX30"></i>
					<input type="text" name="username" placeholder="输入框提示文字">
				</label>
			</li>
			<li>
				<label>
					<select name="select" id="sl_">
						<option value="" selected="selected" class="cmPlaceHolder">(提示文字)</option>
						<option value="1">下拉框选项1</option>
						<option value="2">下拉框选项2</option>
					</select>
				</label>
			</li>
			<li class="cmHasIcon">
				<label>
					<i class="cmIcon cmX30"></i>
					<select name="select" id="sl_">
						<option value="" selected="selected" class="cmPlaceHolder">(提示文字)</option>
						<option value="1">下拉框选项1</option>
						<option value="2">下拉框选项2</option>
					</select>
				</label>
			</li>
		</ul>
	</section>
	<hr>
	<section class="form">
		<h2>表单描述</h2>
		<ul class="cmList cmHasOnlyBox">
			<li>
				<label>
					<input type="text" name="username" placeholder="输入框提示文字，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长">
				</label>
			</li>
		</ul>
		<ul class="cmList cmHasOnlyBox">
			<li>
				<label>
					<input type="text" name="username" placeholder="输入框提示文字，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长">
				</label>
			</li>
		</ul>
		<p class="cmDescr">这里是描述。</p>
		<ul class="cmList cmHasOnlyBox">
			<li>
				<label>
					<input type="text" name="username" placeholder="输入框提示文字，文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长文字超长">
				</label>
			</li>
		</ul>
		<p class="cmDescr">这里是描述。</p>
	</section>
	<hr>
	<section class="act">
		<a class="cmBtn" href="javascript:location.reload();">刷新</a>
	</section>
	<hr>
	<footer>
		<address>&copy; UEFED.COM</address>
	</footer>
</article>
<script src="/js/mv1/lib/lib.js"></script>
<script src="/js/mv1/lib/dpl.js"></script>
<script>_.ext.ini(); DPL.ini(); _.ga.ini();</script>
</body>
</html>
